<template>
  <div>
    <el-input
      v-model="textarea"
      style="width: 240px"
      :rows="2"
      type="textarea"
      placeholder="请输入搜索的内容"
    />
    <el-button type="primary" round @click="sends">搜索</el-button>
    <div>
      <a-button type="primary" @click="showModal">添加</a-button>
      <a-modal v-model:open="open" title="Basic Modal" @ok="handleOk">
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px;max-height:500px"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
        >
          <el-form-item label="名字" prop="names">
            <el-input v-model="ruleForm.names" type="text" />
          </el-form-item>
          <el-form-item label="标题" prop="titles">
            <el-input v-model="ruleForm.titles" type="text" />
          </el-form-item>
        </el-form>
      </a-modal>
    </div>
    <el-table :data="disopne" style="width: 100%">
      <el-table-column prop="name" label="名字" width="180" />
      <el-table-column prop="title" label="标题" width="180" />
      <el-table-column prop="image" label="图片" width="180">
        <template #default="{row}">
          <img :src="row.image" alt style="width: 20px;height:20px" />
        </template>
      </el-table-column>
      <el-table-column prop="address" label="Address">
        <template #default="scope">
          <a-popconfirm
            title="确认删除"
            ok-text="确认"
            cancel-text="取消"
            @confirm="confirm(scope.$index)"
            @cancel="cancel"
          >
            <el-button type="danger">删除</el-button>
          </a-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
      <el-pagination
      current-page="currentPage4"
      page-size="pageSize4"
      :page-sizes="[3, 6, 9, 12]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, computed } from "vue";
import { dataes } from "../api/login";
import { message } from "ant-design-vue";
import type { FormRules } from "element-plus/lib/components/form/src/types.js";

const tableData = ref<any>([]);
onMounted(async () => {
  const res = await dataes();
  tableData.value = res.data.data;
  console.log(res, "数据");
});
// 删除
const confirm = (index: number) => {
  tableData.value.splice(index, 1);
  message.success("确认删除");
};

const cancel = (e: MouseEvent) => {
  console.log(e);
  message.error("Click on No");
};
// 搜索
const textarea = ref("");
const sends = () => {
  const disopay = tableData.value.filter((item: any) => {
    return item.name.includes(textarea.value);
  });
  tableData.value = [...disopay];
  textarea.value = "";
  console.log(textarea.value);
};
// 添加
const open = ref<boolean>(false);
const showModal = () => {
     
  open.value = true;
};
const handleOk = () => {
   tableData.value.push({
    name:ruleForm.names,
    title:ruleForm.titles
    })
    ruleForm.names=""
    ruleForm.titles=""
  open.value = false;
};
const ruleForm = reactive({
  names: "",
  titles: ""
});
const rules = reactive<FormRules<typeof ruleForm>>({
  names: [{trigger: "blur",required:true,message:'请输入名字' }],
  titles: [{trigger: "blur",required:true,message:'请输入标题' }]
});
// 分页
const currentPage4 = ref(1)
const pageSize4 = ref(3)
const disopne=computed(()=>{
    const start=(currentPage4.value-1)*pageSize4.value
    const ends=currentPage4.value*pageSize4.value
    return tableData.value.slice(start,ends)
})
const handleSizeChange = (val: number) => {
    pageSize4.value=val
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    currentPage4.value=val
  console.log(`current page: ${val}`)
}
</script>
